<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信自动化HTTP API管理界面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        .navbar {
            background-color: #07C160;
        }
        .navbar-brand {
            color: white;
            font-weight: bold;
        }
        .card {
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #f1f1f1;
            font-weight: bold;
        }
        .status-indicator {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        .status-online {
            background-color: #28a745;
        }
        .status-offline {
            background-color: #dc3545;
        }
        .status-warning {
            background-color: #ffc107;
        }
        .log-container {
            height: 300px;
            overflow-y: auto;
            background-color: #212529;
            color: #f8f9fa;
            padding: 10px;
            font-family: monospace;
            border-radius: 5px;
        }
        .log-entry {
            margin: 0;
            padding: 2px 0;
            border-bottom: 1px solid #343a40;
        }
        .log-info {
            color: #17a2b8;
        }
        .log-warning {
            color: #ffc107;
        }
        .log-error {
            color: #dc3545;
        }
        .log-success {
            color: #28a745;
        }
        .btn-wxauto {
            background-color: #07C160;
            color: white;
        }
        .btn-wxautox {
            background-color: #1E88E5;
            color: white;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark mb-4">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-chat-dots-fill"></i> 微信自动化HTTP API管理界面
            </a>
            <div class="d-flex align-items-center">
                <span class="text-white me-2">API服务状态:</span>
                <span class="status-indicator" id="api-status"></span>
                <span class="text-white" id="api-status-text">检查中...</span>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <!-- 左侧面板 -->
            <div class="col-md-4">
                <!-- 插件状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-plugin"></i> 插件状态
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span><i class="bi bi-box"></i> wxauto</span>
                                <span class="badge" id="wxauto-status">检查中...</span>
                            </div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar bg-success" id="wxauto-progress" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span><i class="bi bi-box"></i> wxautox</span>
                                <span class="badge" id="wxautox-status">检查中...</span>
                            </div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar bg-primary" id="wxautox-progress" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="d-grid gap-2">
                            <button class="btn btn-sm btn-outline-success" id="install-wxauto">
                                <i class="bi bi-download"></i> 安装/修复 wxauto
                            </button>
                            <button class="btn btn-sm btn-outline-primary" id="upload-wxautox">
                                <i class="bi bi-upload"></i> 上传并安装 wxautox
                            </button>
                            <input type="file" id="wxautox-file" accept=".whl" style="display: none;">
                        </div>
                    </div>
                </div>

                <!-- 库选择卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-toggles"></i> 库选择
                    </div>
                    <div class="card-body">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="lib-select" id="wxauto-select" value="wxauto">
                            <label class="form-check-label" for="wxauto-select">wxauto</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="lib-select" id="wxautox-select" value="wxautox">
                            <label class="form-check-label" for="wxautox-select">wxautox</label>
                        </div>
                        <div class="d-grid mt-2">
                            <button class="btn btn-sm btn-primary" id="apply-lib-select">
                                <i class="bi bi-check-circle"></i> 应用选择
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 服务控制卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-gear"></i> 服务控制
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-sm btn-success" id="start-service">
                                <i class="bi bi-play-fill"></i> 启动服务
                            </button>
                            <button class="btn btn-sm btn-danger" id="stop-service">
                                <i class="bi bi-stop-fill"></i> 停止服务
                            </button>
                            <button class="btn btn-sm btn-warning" id="restart-service">
                                <i class="bi bi-arrow-clockwise"></i> 重启服务
                            </button>
                            <button class="btn btn-sm btn-info" id="reload-config">
                                <i class="bi bi-arrow-repeat"></i> 重载配置
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧面板 -->
            <div class="col-md-8">
                <!-- 系统状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="bi bi-activity"></i> 系统状态
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">API服务器</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-hdd-rack"></i></span>
                                        <input type="text" class="form-control" id="api-url" value="http://localhost:5000" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">当前使用库</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-box"></i></span>
                                        <input type="text" class="form-control" id="current-lib" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">API请求数</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-arrow-down-up"></i></span>
                                        <input type="text" class="form-control" id="api-requests" value="0" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">队列长度</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-list-ol"></i></span>
                                        <input type="text" class="form-control" id="queue-length" value="0" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">微信连接状态</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-chat"></i></span>
                                        <input type="text" class="form-control" id="wechat-status" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 日志卡片 -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <i class="bi bi-journal-text"></i> 实时日志
                        </div>
                        <div>
                            <button class="btn btn-sm btn-outline-secondary" id="clear-logs">
                                <i class="bi bi-trash"></i> 清空
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="log-container" id="log-container">
                            <!-- 日志内容将在这里动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
